import { FC } from 'react'
import { QuestionRadioProps } from './types'
import { Radio, Space, Typography } from 'antd'

export const QuestionRadioDefaultProps: QuestionRadioProps = {
  title: '单选标题',
  isVertical: false,
  options: [
    { value: 'item1', text: '选项 1' },
    { value: 'item2', text: '选项 2' },
    { value: 'item3', text: '选项 3' },
  ],
  value: '',
}

const QuestionRadio: FC<QuestionRadioProps> = props => {
  const { title, value, isVertical, options } = { ...QuestionRadioDefaultProps, ...props }

  return (
    <div>
      <Typography.Paragraph strong>{title}</Typography.Paragraph>
      <Radio.Group value={value}>
        <Space direction={isVertical ? 'vertical' : 'horizontal'} wrap>
          {options?.map(opt => {
            return (
              <Radio value={opt.value} key={opt.value}>
                {opt.text}
              </Radio>
            )
          })}
        </Space>
      </Radio.Group>
    </div>
  )
}

export default QuestionRadio
